import React, { memo, useRef, useEffect, useState } from "react";
import { LoginWayTwoWrap } from "./style";

export default memo(function LoginWayTwo(props) {
  const checkTF = (e) => {
    props.isCheck(e.target.checked);
  };
  return (
    <LoginWayTwoWrap>
      <div className="login-left-box fl">
        <div className="login-left-img"></div>
        <button onClick={props.phoneLogin} className="phone-login">
          手机号登录
        </button>
        <button onClick={props.register} className="register">
          注册
        </button>
      </div>
      <div className="login-box-right fl">
        <ul>
          <li>
            <i className="wx-login"></i>
            <a>微信登录</a>
          </li>
          <li>
            <i className="qq-login"></i>
            <a>QQ登录</a>
          </li>
          <li>
            <i className="wb-login"></i>
            <a>微博登录</a>
          </li>
          <li>
            <i className="wymail-login"></i>
            <a onClick={props.changeModelToMail}>网易邮箱账号登录</a>
          </li>
        </ul>
      </div>
      <div className="gx-check-box">
        <input id="agreeCheck" onClick={(e) => checkTF(e)} type="checkbox" />
        <label className="label-text" htmlFor="agreeCheck">
          同意
        </label>
        <a>《服务条款》</a>
        <a>《隐私政策》</a>
        <a>《儿童隐私政策》</a>
      </div>
      <div onClick={props.changeCheck} className="qdcord-pic"></div>
    </LoginWayTwoWrap>
  );
});
